<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LRC Time Remover</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
  }
  .container {
    display: flex;
    width: 80%;
    gap: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .column {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  textarea {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
  }
  button {
    margin-top: 10px;
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  button:hover {
    background-color: #0056b3;
  }
  .button-group {
    display: flex;
    gap: 10px;
  }
.message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s;
}
.message.show {
    opacity: 1;
}
</style>
<script>
function removeLrcTime() {
    var lrcInput = document.getElementById('lrcInput');
    var lrcOutput = document.getElementById('lrcOutput');
    var regex = /\[(ti|ar|al|by|offset|.*?):\s*.*?\]/g; // 匹配LRC中的标签
    var cleanedText = lrcInput.value.replace(regex, '');
    lrcOutput.value = cleanedText;
}
function copyToClipboard() {
    var lrcOutput = document.getElementById('lrcOutput');
    lrcOutput.select();
    document.execCommand("copy");

    // 显示消息框
    var message = document.getElementById('message');
    message.classList.add('show');
    message.textContent = "内容已复制到剪贴板";

    // 在3秒后隐藏消息框
    setTimeout(function() {
        message.classList.remove('show');
    }, 3000);
}

function clearText() {
    document.getElementById('lrcInput').value = '';
    document.getElementById('lrcOutput').value = '';
}
</script>
</head>
<body>
<div class="container">
  <div>
    <textarea id="lrcInput" placeholder="粘贴你的LRC歌词..."></textarea>
    <button onclick="removeLrcTime()">去时间</button>
    <button onclick="clearText()">清空</button>
  </div>
  <div>
    <textarea id="lrcOutput"  placeholder="去掉时间标签后的内容将显示在这里..."></textarea>
    <button onclick="copyToClipboard()">复制内容</button>
    <button onclick="clearText()">清空</button>
  </div>
</div>
<div id="message" class="message"></div>
</body>
</html>